<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SignaturePad</title>
  
  <style>
    #canvas {
      height: 300px;
      width: 700px;
      border: 1px solid grey;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <button onclick="savePng()">保存为png</button>
  <!-- <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script> -->
  <script src="./js/signature_pad.umd.min.js"></script>
  <script>
    const canvas = document.getElementById('canvas')
    const signaturePad = new SignaturePad(canvas, {
      // minWidth: 5,
      // maxWidth: 10,
      penColor: "rgb(66, 133, 244)"
    });
    // 一下代码是必须的
    function resizeCanvas() {
      // When zoomed out to less than 100%, for some very strange reason,
      // some browsers report devicePixelRatio as less than 1
      // and only part of the canvas is cleared then.
      const ratio =  Math.max(window.devicePixelRatio || 1, 1);

      // This part causes the canvas to be cleared
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext("2d").scale(ratio, ratio);

      // This library does not listen for canvas changes, so after the canvas is automatically
      // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
      // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
      // that the state of this library is consistent with visual state of the canvas, you
      // have to clear it manually.
      //signaturePad.clear();
      
      // If you want to keep the drawing on resize instead of clearing it you can reset the data.
      signaturePad.fromData(signaturePad.toData());
    }

    // On mobile devices it might make more sense to listen to orientation change,
    // rather than window resize events.
    window.onresize = resizeCanvas;
    resizeCanvas();

    function dataURLToBlob(dataURL) {
      // Code taken from https://github.com/ebidel/filer.js
      const parts = dataURL.split(';base64,');
      const contentType = parts[0].split(":")[1];
      const raw = window.atob(parts[1]);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }

      return new Blob([uInt8Array], { type: contentType });
    }

    function download(dataURL, filename) {
      const blob = dataURLToBlob(dataURL);
      const url = window.URL.createObjectURL(blob);

      const a = document.createElement("a");
      a.style = "display: none";
      a.href = url;
      a.download = filename;

      document.body.appendChild(a);
      a.click();

      window.URL.revokeObjectURL(url);
    }

    
    function savePng() {
      if (signaturePad.isEmpty()) {
        alert("Please provide a signature first.");
      } else {
        const dataURL = signaturePad.toDataURL();
        download(dataURL, "signature.png");
      }
    }
  </script>
</body>
</html>
